// 权限插件（引入到了除登录页面，以外的其他所有页面）
/**
 * 目标1：访问权限控制
 * 1.1 从本地存储判断无 token 令牌字符串，则强制跳转到登录页
 * 1.2 登录成功后，保存 token 令牌字符串到本地，并跳转到内容列表页面
 */
/* token 的介绍:
概念：访问权限的令牌，本质上是一串字符串
创建：正确登录后，由后端签发并返回
作用：判断是否有登录状态等，控制访问权限
注意：前端只能判断 token 有无，而后端才能判断 token 的有效性 */

// 1.1 从本地存储判断无 token 令牌字符串，则强制跳转到登录页
const token = localStorage.getItem('token')
if (!token) {
  // js代码是在 html文件运行的，所以是以 html 文件的相对路径为准
  location.href = '../login/index.html'
}

/**
 * 目标2：设置个人信息
 * 2.1 在 utils/request.js 设置请求拦截器，统一携带 token
 * 2.2 请求个人信息并设置到页面
 */

// 2.2 请求个人信息并设置到页面
/* axios({
  url: '/v1_0/user/profile',
  // 请求头
  Headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  }
}).then((result) => {
  console.log(result)
}) */
// 按照上面写的问题：很多接口，都需要携带 token 令牌字符串
// 解决：在请求拦截器统一设置公共 headers 选项
axios({
  // 基地址已经统一设置过了，只写后半段就行
  url: '/v1_0/user/profile'
}).then((result) => {
  /*   没有对他进行 响应拦截器 优化 就这样写
  // 已经在 utils/request.js 设置请求拦截器，统一携带 token
  console.log(result) // 得到所有数据
  console.log(result.data.data.name) // 得到需要使用的个人信息 name
  const username = result.data.data.name */

  // 对 响应拦截器优化 后 取出 result 进一步选取了需要的一些数据
  console.log(result)
  console.log(result.data.name) // 得到需要使用的个人信息 name
  const username = result.data.name
  // 内容管理页面和发布文章的页面都引入了 auth等等这些 js
  //  而且，内容管理页面和发布文章的右上昵称这个类名都叫 nick-name    所以只需要写一遍，这两个页面的昵称都会设置上去
  document.querySelector('.nick-name').innerHTML = username
})

/**
 * 目标3：退出登录
 *  3.1 绑定点击事件
 *  3.2 清空本地缓存，跳转到登录页面
 */
// 3.1 绑定点击事件
document.querySelector('.quit').addEventListener('click', () => {
  // 3.2 清空本地缓存，跳转到登录页面
  //  localStorage.clear() // 因为练习，不建议清空本地缓存，不然其他练习保存的缓存都没了
  localStorage.removeItem('token') // 删除 token 即可
  location.href = '../login/index.html'
})
